<template>
  <div class="ol-detail">
    <van-cell-group>
      <van-field
        v-model="moduleName"
        label="板块名称"
        input-align="right"
        placeholder="请输入板块名称"
      />
      <van-field
        v-model="system"
        label="涉及系统"
        input-align="right"
        @input="search"
        placeholder="请输入涉及系统"
      />
      <van-field
        v-model="principal"
        label="负责人"
        @click="choosePrincipal"
        input-align="right"
        placeholder="请选择负责人"
      />
    </van-cell-group>
    <van-popup position="bottom" get-container="body" v-model="showPop">
      <van-picker
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="showPop = false"
      />
    </van-popup>
    <van-popup position="bottom" get-container="body" v-model="showPrinPop">
      <van-picker
        show-toolbar
        :columns="prinColumns"
        @confirm="onConfirmPrin"
        @cancel="showPrinPop = false"
      />
    </van-popup>
    <div class="form-btn">
      <div @click="del" class="btn btn-color1">删除</div>
      <div @click="submit" class="btn btn-color3">保存</div>
    </div>
    <goback></goback>
  </div>
</template>
<script>
import {
  demandSearch,
  createServiceList,
  demandDetail,
  demandEdit,
  delServiceList
} 
from "@/api/service.js";
import { Toast } from "vant";
import Goback from '@/components/goback.vue';
export default {
  components: {
    Goback
  },
  data() {
    return {
      id: "",
      isEdit: "",
      index: "",
      prinid: "", //负责人id
      moduleName: "",
      data: "",
      system: "",
      principal: "",
      columns: [],
      valueList: [],
      showPop: false,
      showPrinPop: false,
      prinColumns: [],
      sysChange:false  ,//是否更改设计系统
    };
  },
  mounted() {
    this.id = this.$route.query.id;
    if (this.$route.query.isEdit) {
      this.isEdit = this.$route.query.isEdit;
      this.server_id = this.$route.query.server_id;
      this.detailData();
    }
  },
  methods: {
    //需求分解单详情
    detailData() {
      demandDetail({
        id: this.id,
      }).then((res) => {
        console.log(res);
        if (res.status == "success") {
          this.data = res.data;
          this.moduleName = res.data.plate_name;
          this.system = res.data.involve_system_name;
          this.principal = res.data.develop_name;
          this.prinid = res.data.develop_name_id;
          if (res.data.develop_data.length > 1) {
            for (var i = 0; i < res.data.develop_data.length; i++) {
              this.prinColumns.push(res.data.develop_data[i].name);
            }
          }
        }
      });
    },
    search() {
      if (this.system) {
        demandSearch({
          search: this.system,
        }).then((res) => {
          if (res.status == "success" && res.data.length > 0) {
            this.columns = [];
            this.data = res.data;
            for (var i = 0; i < res.data.length; i++) {
              this.columns.push(res.data[i].involve_system_name);
            }
            this.showPop = true;
          }
        });
      } else {
        this.showPop = false;
      }
    },
    onConfirm(value) {
      const index = this.columns.indexOf(value);
      this.moduleName = this.data[index].plate_name;
      this.index = index;
      this.system = value;
      this.principal = '';
      this.prinid = '';
      if (this.data[index].develop_data.length == 1) {
        this.principal = this.data[index].develop_data[0].name;
        this.prinid = this.data[index].develop_data[0].id;
      } else if (this.data[index].develop_data.length > 1) {
        for (var i = 0; i < this.data[index].develop_data.length; i++) {
          this.prinColumns.push(this.data[index].develop_data[i].name);
        }
      }
      this.sysChange = true;
      this.showPop = false;
    },
    choosePrincipal() {
      this.showPrinPop = true;
    },
    onConfirmPrin(value) {
      this.principal = value;
      const index = this.prinColumns.indexOf(value);
      this.prinid = this.sysChange?this.data[this.index].develop_data[index].id:this.data.develop_data[index].id;
      this.showPrinPop = false;
      this.prinColumns = [];
      
    },

    //删除
    del() {
      if (this.isEdit){
        delServiceList({ 
          task_id: this.id ,
          server_id:this.server_id
        }).then((res) => {
          console.log(res.data);
          if(res.status=='success'){
            this.$router.back();
          }
          Toast(res.message);
        });
      }else{
        this.moduleName = "";
        this.system = "";
        this.principal = "";
      }
    },
    submit() {
      let subData = this.sysChange?this.data[this.index]:this.data
      if (this.system && this.moduleName && this.principal) {
        if (this.isEdit) {
          demandEdit({
            decompose_id: this.id,   //需求分解单id
            involve_system_id:subData.involve_system_id,   //涉及系统id
            involve_system_name:subData.involve_system_name,  //涉及系统名称
            plate_id:subData.plate_id,  //平台id
            plate_name:subData.plate_name,//平台名称
            unit_id:subData.unit_id,//单位id’
            unit_name:subData.unit_name,//	单位名称
            request_data:JSON.stringify(subData.request_data),//需求人员信息
            develop_data:JSON.stringify(subData.develop_data),//开发人员信息
            develop_name_id:this.prinid,  //系统负责人id
            develop_name:this.principal,  //系统负责人名称
          }).then((res) => {
            console.log(res);
            if (res.status == "success") {
              Toast(res.message);
              this.$router.back();
            }
          });
        } else {
          createServiceList({
            server_id: this.id,   //服务单id
            involve_system_id:subData.involve_system_id,   //涉及系统id
            involve_system_name:subData.involve_system_name,  //涉及系统名称
            plate_id:subData.plate_id,  //平台id
            plate_name:subData.plate_name,//平台名称
            unit_id:subData.unit_id,//单位id’
            unit_name:subData.unit_name,//	单位名称
            request_data:JSON.stringify(subData.request_data),//需求人员信息
            develop_data:JSON.stringify(subData.develop_data),//开发人员信息
            develop_name_id:this.prinid,  //系统负责人id
            develop_name:this.principal,  //系统负责人名称
          }).then((res) => {
            console.log(res);
            if (res.status == "success") {
              Toast(res.message);
              this.$router.go(-1);
            }
          });
        }
      }else{
        Toast('不能为空');
      }
    },
  },
};
</script>
<style lang="less" scoped>
.ol-detail {
  padding-bottom: calc(80px + env(safe-area-inset-bottom));
  min-height: 100vh;
  background: #f7f9f9;
  box-sizing: border-box;
  .form-box {
    background: #fff;
  }
  .form-btn {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    background: #fff;
    height: 34px;
    padding: 13px 15px;
    padding-bottom: calc(13px + env(safe-area-inset-bottom));
    .btn {
      flex: 1;
      height: 34px;
      line-height: 34px;
      text-align: center;
      font-size: 14px;
      margin-right: 6px;
      border-radius: 5px;
      &:last-child {
        margin-right: 0;
      }
    }
    .btn-color1 {
      background: #ebedf0;
      color: #011445;
    }
    .btn-color3 {
      background: #009966;
      color: #fff;
    }
  }
}
</style>